<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/product_info.css">
</head>
<body>
    <!-- 整体 -->
    <div class="warp">
        <!-- 头部样式 -->
        <header>
            <!-- 返回按钮 -->
            <button class="back_btn"><a href="#">back</a></button>
            <p class="head_name">产品详情</p>
            <!-- 收藏按钮 -->
            <button class="Collection_btn">
                <i class="iconfont icon-31shoucangxuanzhong shoucang"></i>
            </button>
        </header>
        <!-- 内容区 -->
        <main>
            <!-- 背景图 -->
            <div class="food_bg"><img src="./img/xiangqing_bg.png" alt=""></div>
            <!-- 价格与好评 -->
            <div class="food_info_cnt">
                <div class="pice_buy">
                    <span>￥&nbsp;32</span>
                    <button class="buy_btn"><a href="#">购买</a></button>
                    </div>
                <div class="evaluate">
                      <div class="evaluate_left">
                        <i class="iconfont icon-31shoucangxuanzhong shoucang"></i>
                        <span>好评度</span><span>99%</span>
                      </div>
                      <div class="evaluate_right">
                        <span>共605个评价&gt;</span>
                      </div>
                </div>
                <div class="userfit">
                    <a href="#"><span>适用商户</span></a>
                    <a href="#"><span>&gt;</span></a>
                </div>
            </div>
            <!-- 门店列表 -->
            <div class="shoplist">
                <!-- 单个门店 -->
                <div class="shop_box">
                   <!-- 门店左边图片区域 -->
                    <div class="shopinfo_left"><img src="./img/shousi1.png" alt="">
                        <!-- 图片内名字 -->
                        <div class="shop_img_name">正佳店</div>
                    </div>
                    <div class="shopinfo_mid">
                        <p>万岁寿司（正佳店）</p>
                        <p>
                            <i class="iconfont icon-31shoucangxuanzhong stars"></i>
                            <i class="iconfont icon-31shoucangxuanzhong stars"></i>
                            <i class="iconfont icon-31shoucangxuanzhong stars"></i>
                            <i class="iconfont icon-31shoucangxuanzhong stars"></i>
                            <i class="iconfont icon-31shoucangxuanzhong stars"></i>
                            <span>10分</span>
                        </p>
                        <p>离你100m</p>
                        <p><a href="#">查看详情&gt;&gt;</a></p>
                    </div>
                    <div class="shopinfo_right">
                        <button><a href="#">购买</a></button>
                    </div>
                </div>
                <div class="shop_box">
                    <!-- 门店左边图片区域 -->
                     <div class="shopinfo_left"><img src="./img/shousi2.png" alt="">
                         <!-- 图片内名字 -->
                         <div class="shop_img_name">体育西店</div>
                     </div>
                     <div class="shopinfo_mid">
                         <p>万岁寿司（体育西店）</p>
                         <p>
                             <i class="iconfont icon-31shoucangxuanzhong stars"></i>
                             <i class="iconfont icon-31shoucangxuanzhong stars"></i>
                             <i class="iconfont icon-31shoucangxuanzhong stars"></i>
                             <i class="iconfont icon-31shoucangxuanzhong stars"></i>
                             <i class="iconfont icon-31shoucangxuanzhong stars"></i>
                             <span>10分</span>
                         </p>
                         <p>离你100m</p>
                         <p><a href="#">查看详情&gt;&gt;</a></p>
                     </div>
                     <div class="shopinfo_right">
                         <button><a href="#">购买</a></button>
                     </div>
                 </div>
                 <div class="shop_box">
                    <!-- 门店左边图片区域 -->
                     <div class="shopinfo_left"><img src="./img/shousi3.png" alt="">
                         <!-- 图片内名字 -->
                         <div class="shop_img_name">昌岗店</div>
                     </div>
                     <div class="shopinfo_mid">
                         <p>万岁寿司（昌岗店）</p>
                         <p>
                             <i class="iconfont icon-31shoucangxuanzhong stars"></i>
                             <i class="iconfont icon-31shoucangxuanzhong stars"></i>
                             <i class="iconfont icon-31shoucangxuanzhong stars"></i>
                             <i class="iconfont icon-31shoucangxuanzhong stars"></i>
                             <i class="iconfont icon-31shoucangxuanzhong stars"></i>
                             <span>10分</span>
                         </p>
                         <p>离你100m</p>
                         <p><a href="#">查看详情&gt;&gt;</a></p>
                     </div>
                     <div class="shopinfo_right">
                         <button><a href="#">购买</a></button>
                     </div>
                 </div>
                 <div class="shop_box">
                    <!-- 门店左边图片区域 -->
                     <div class="shopinfo_left"><img src="./img/shousi1.png" alt="">
                         <!-- 图片内名字 -->
                         <div class="shop_img_name">珠江新城店</div>
                     </div>
                     <div class="shopinfo_mid">
                         <p>万岁寿司（珠江新城店）</p>
                         <p>
                             <i class="iconfont icon-31shoucangxuanzhong stars"></i>
                             <i class="iconfont icon-31shoucangxuanzhong stars"></i>
                             <i class="iconfont icon-31shoucangxuanzhong stars"></i>
                             <i class="iconfont icon-31shoucangxuanzhong stars"></i>
                             <i class="iconfont icon-31shoucangxuanzhong stars"></i>
                             <span>10分</span>
                         </p>
                         <p>离你100m</p>
                         <p><a href="#">查看详情&gt;&gt;</a></p>
                     </div>
                     <div class="shopinfo_right">
                         <button><a href="#">购买</a></button>
                     </div>
                 </div>
            </div>
        </main>

            <!-- 底部导航栏 -->
            <footer>
                <div class="navb_list">
                    <div class="nav_box">
                        <p><a href="./index.html"><i class="iconfont icon-shouye3 shouye_icon"></i></a></p>
                        <p>首页</p>
                    </div>
                    <div class="nav_box">
                        <p><a href="./classification.html"><i class="iconfont icon-fenlei classification_icon"></i></a></p>
                        <p>分类</p>
                    </div>
                    <div class="nav_box">
                        <p><a href="./find.html"><i class="iconfont icon-21 find_icon"></i></a></p>
                        <p>发现</p>
                    </div>
                    <div class="nav_box">
                        <p><a href="./mine.html"><i class="iconfont icon-shouye_wodehui mine_icon"></i></a></p>
                        <p>我的</p>
                    </div>
               </div>
                </footer>
    </div>
</body>
</html>